<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>预期收益</span>
      </div>
      <div class="ExceptedReturn-box">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#e1e4e5' }"
          ref="myTable"
        >
          <el-table-column prop="productId" label="产品" width="180">
          </el-table-column>
          <el-table-column prop="investRcordID" label="投资编号" width="180">
          </el-table-column>
          <el-table-column prop="expectedDate" label="投资到期时间">
          </el-table-column>
          <el-table-column prop="return_Money" label="待提取收益(元)">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.return_Money > 0"
                :disabled="checkDisable(scope.row.expectedStamp)"
                @click="applyReturn(scope.row.return_id)"
                type="success"
                size="small"
                >提取收益</el-button
              >
              <el-button v-else disabled type="info" size="small"
                >已提取</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @current-change="onPageChange"
        background
        layout="prev, pager, next"
        :page-count="pageData.totalPages"
        :current-page="pageData.curPage"
        :page-size="pageData.perPage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
    
    <script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 分页数据
      pageData: {
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页显示几条数据
        perPage: 3,
      },
      tableData: [],
    };
  },
  methods: {
    ...mapActions({
      getExceptedReturn: "transaction/getExceptedReturn",
      getIncome: "transaction/getIncome",
      getInfo: "user/getInfo",
    }),

    // 获取我的预期收益列表
    getExceptedReturnList() {
      this.getExceptedReturn(this.pageData).then((res) => {
        this.tableData = res.content;
        this.pageData.totalPages = res.paginateInfo.pages;
      });
    },
    // 当前页码发生变化时的回调
    onPageChange(index) {
      this.pageData.curPage = index;
      this.getExceptedReturnList();
    },
    //   判断是否可以点击提取收益
    checkDisable(stamp) {
      // 当前的日期
      const cur_date = new Date();
      const ex_date = new Date(stamp * 1000);
      return !(cur_date >= ex_date);
    },
    // 提取收益
    applyReturn(returnId){
        const return_id = { return_id : returnId}
        this.getIncome(return_id).then(res =>{
            this.$message.success('提取收益成功')
            this.getExceptedReturnList()
            this.getInfo()
        })
    }
  },
  created() {
    // 页面初始化完成获取预期收益列表
    this.getExceptedReturnList();
  },
};
</script>
    
    <style>
.msg-dialog .el-dialog__body {
  padding: 10px;
}
</style>
    
    <style lang="scss" scoped>
.msgData-card {
  min-height: 200px;
}
</style>